<template>
  <ul class="v-tabs">
    <li
      v-for="item in config.tab"
      :key="item.id"
      @click="handlerClick(item.id)"
      :style="item.id === action ? actionLiStyle : liStyle"
      :class="{ action: item.id === action }"
    >
      {{ item.name }}
    </li>
  </ul>
</template>

<script>
import CommonMixin from "../mixins/commonMixin";
export default {
  name: "v-tabs",
  mixins: [CommonMixin],
  data() {
    return {
      action: this.config.defaultId,
    };
  },
  methods: {
    handlerClick(id) {
      this.action = id;
    },
  },
  computed: {
    liStyle() {
      return {
        width: this.config.width,
        height: this.config.height,
        margin: `0 ${this.config.spacing}px`,
        "font-size": `${this.config.fontSize}px`,
        color: this.config.fontColor,
        background: `${this.config.bgColor} url('${
          this.url + this.config.bgImg
        }')  no-repeat center`,
        border: `${this.config.border.width}px solid ${this.config.border.color}`,
        "line-height": `${
          this.location.height - this.config.border.width * 2
        }px`,
        "text-align": "center",
      };
    },
    actionLiStyle() {
      return {
        width: this.config.width,
        height: this.config.height,
        margin: `0 ${this.config.spacing}px`,
        "font-size": `${this.config.fontSize}px`,
        color: this.config.action.fontColor,
        background: `${this.config.action.bgColor} url('${
          this.url + this.config.action.bgImg
        }')  no-repeat center`,
        border: `${this.config.border.width}px solid ${this.config.action.borderColor}`,
        "line-height": `${
          this.location.height - this.config.border.width * 2
        }px`,
        "text-align": "center",
      };
    },
  },
};
</script>

<style scoped>
.v-tabs{
  width: 100%;
  display: flex;
}

</style>
